<!--
 * @Description: 
 * @Author: jack-wang
 * @Date: 2021-03-29 13:26:16
 * @LastEditTime: 2021-03-29 13:26:16
 * @LastEditors: Su Yunzheng
-->
<template>
    <div class="home-wrap">
        <div class="setpos">
            <router-link to="/setPos">{{address}}</router-link>
        </div>
        <b-scroll 
            :scrollY="true"
            ref="bscrollCom"
            :pullUpLoad="pullUpLoad"
            @getNextList="getNextList"
        >
            <!-- swiper -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in bannerList" :key="item.id">
                        <img :src="item.image" >
                    </div>
                </div>
            </div>
            <!-- 列表 -->
            <div class="shop-list">
                <shop-item v-for="item in shopList" :key="item.id" 
                    :cover="item.cover"
                    :name="item.name"
                    :isCar="true"
                    :id="item.id"
                ></shop-item>
            </div>

            <template v-slot:loading>
                <div v-if="pageid!=total">
                    loading
                </div>
            </template>
        </b-scroll>
    </div>
</template>

<script>
import BScroll from '@/components/bScroll/bscroll';
import Swiper from 'swiper';
import ShopItem from '@/components/shopItem';
export default {
    data(){
        return{
            address:'',
            bannerList:[],
            pageid:1,       //页码
            limit:5,        //每页的条数
            shopList:[],    //商品列表
            pullUpLoad:{
                threshold: 50
            },
            total:2         //总条数：2
        }
    },
    activated() {
        this.address = localStorage.getItem('positionData') || '';
    },
    components:{
        BScroll,
        ShopItem
    },
    created(){
        //获取banner
        this.getBanner();

        //获取商品列表
        this.getShopList();
        
    },
    mounted(){
        this.$nextTick(() => {
            new Swiper('.swiper-container',{
                observer: true
            })
        })
    },
    methods:{
        getBanner(){
            this.$http.getBanner().then(res => {
                if(res.data.code === 1){
                    this.bannerList = res.data.data;
                }
            })
        },
        getShopList(){
            this.$http.getShop(this.pageid,this.limit).then(res => {
                if(res.data.code === 1){
                    this.shopList = this.shopList.concat(res.data.data.commList)
                }
            })
        },
        getNextList(){
            if(this.pageid < this.total){
                this.pageid++;
                this.getShopList();
            }else{
                this.pullUpLoad = false;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .home-wrap{
        @include size(100%,100%);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        .setpos{
            @include size(100%,44px);
            border-bottom:1px solid gray;
            line-height: 44px;
        }

        .home-content{
            width: 100%;
            flex:1;
            overflow: hidden;
        }

        .swiper-container{
            @include size(100%,140px);
        }
    }
</style>